<template>
  <div class="app-container">
    <el-form :model="queryParams" :inline="true">
        <el-form-item label="客户名称" >
            <el-input
                v-model="queryParams.nickName"
                placeholder="请输入"
                clearable
                @keyup.enter="handleQuery"
            />
        </el-form-item>
        <el-form-item label="客户ID" >
            <el-input
                v-model="queryParams.customerId"
                placeholder="请输入"
                clearable
                @keyup.enter="handleQuery"
            />
        </el-form-item>
        <el-form-item label="销售" >
            <el-input
                v-model="queryParams.saleName"
                placeholder="请输入"
                clearable
                @keyup.enter="handleQuery"
            />
        </el-form-item>
        <el-form-item label="生成时间" >
            <el-date-picker
                v-model="queryParams.lastTime"
                type="datetime"
                placeholder="生成时间"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-table  class="newClass" v-loading="loading" :data="localLifeTableList">
        <el-table-column label="ID" align="center" prop="id" />
        <el-table-column label="客户id" align="center" prop="customerId" />
        <el-table-column label="客户昵称" align="center" prop="nickName" />
        <el-table-column label="客户唯一码" align="center" prop="unionId" />
        <el-table-column label="销售" align="center" prop="saleName" />
        <el-table-column label="生成时间" align="center" prop="lastTime" />
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
            <template #default="scope">
                <el-button link type="primary" @click="handleDelete(scope.row)">最近三次换发记录</el-button>
                <el-button link type="primary" @click="handleUpdate(scope.row)">补发诉求</el-button>
            </template>
        </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <el-drawer
        v-model="drawer"
        direction="rtl"
        :close-on-click-modal="true"
        size="60%"
        title="调用详情"
    >
        <el-tabs v-model="activeName" class="demo-tabs" >
            <el-tab-pane v-for="(item,index) in changeList" :key="item.id" :label="`调用${index+1}`" :name="`调用${index+1}`">
                <div style="display: flex;margin-bottom: 10px;">
                    <div style="width: 150px;">时间</div>
                    <div>{{ item.createTime }}</div>
                </div>
                <div style="display: flex;margin-bottom: 10px;">
                    <div style="width: 150px;">原照片</div>
                    <el-image
                        :preview-src-list="[item.targetPicture]"
                        :preview-teleported="true"
                        :z-index="99999999"
                        style="width: 200px; height: 200px" :src="item.targetPicture" fit="contain"
                    />
                </div>
                <div style="display: flex;margin-bottom: 10px;">
                    <div style="width: 150px;">风格选择</div>
                    <el-image
                        :preview-src-list="[item.aiChangeRecordSub[0].swapPicture]"
                        :preview-teleported="true"
                        :z-index="99999999"
                        style="width: 200px; height: 200px" :src="item.aiChangeRecordSub[0].swapPicture" fit="contain"
                    />
                </div>
                <div style="display: flex;">
                    <div style="width: 150px;">生成照片</div>
                    <el-image
                        :preview-src-list="[item.aiChangeRecordSub[0].successPicture]"
                        :preview-teleported="true"
                        :z-index="99999999"
                        style="width: 200px; height: 200px" :src="item.aiChangeRecordSub[0].successPicture" fit="contain"
                    />
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>
    <el-dialog title="补发诉求" v-model="open" width="700">
        <div>
            <div v-for="(item,index) in examTopic" :key="item.id" style="display: flex;margin-bottom: 10px;">
                <div>{{index+1}}、</div>
                <div>
                    <div style="font-size: 20px;">{{item.topicTitle}}</div>
                    <h4 v-for="value in item.userSelection2" :key="value" style="color: brown;">{{ value }}</h4>
                </div>
            </div>
        </div>
    </el-dialog>
  </div>
</template>

<script setup name="DesignList">
import {ref} from "vue";
import {listSwap,aiChangeList,examTopicUnionId} from "@/api/business/newMiniProgram";

const localLifeTableList = ref([]);
const loading = ref(true);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const { proxy } = getCurrentInstance();
const open = ref(false);
const drawer = ref(false);
const total = ref(0);
const changeList = ref([]);
const examTopic = ref([]);
const activeName = ref('调用1')
function handleUpdate(e){
    examTopicUnionId({
        unionId:e.unionId,
        type:'101',
        version:'7'
    }).then(res=>{
        for(var i=0;i<res.data.length;i++){
            if(res.data[i].userSelection){
                res.data[i].userSelection = res.data[i].userSelection.split(',')
            }
            res.data[i].userSelection2 = []
            for(var j=0;j<res.data[i].papTopicOptions.length;j++){
                if(res.data[i].userSelection&&res.data[i].userSelection.length>0){
                    for(var a=0;a<res.data[i].userSelection.length;a++){
                        if(res.data[i].userSelection[a] == res.data[i].papTopicOptions[j].prefix){
                            res.data[i].userSelection2.push(res.data[i].papTopicOptions[j].content)
                        }
                    }
                }
            }
        }
        examTopic.value = res.data
    })
    open.value = true
}
/** 删除按钮操作 */
function handleDelete(e) {
    aiChangeList({
        unionId:e.unionId
    }).then(res=>{
        changeList.value = res.data
    })
    drawer.value = true
}
/** 查询极客侠后台管理系统本地消耗列表 */
function getList() {
  loading.value = true;
  listSwap(queryParams.value).then(response => {
    localLifeTableList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function cancel(e) {
  open.value = false
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
getList();
</script>

